<template>

	<view :style="themeColor()">
		<view class="bg-[var(--page-bg-color)] min-h-[100vh] relative" v-if="Object.keys(goodsDetail).length">
			<!-- 自定义头部 -->
			<view class="flex flex-col items-center fixed left-0 right-0 z-10 bg-transparent detail-head"
				:class="{ '!bg-[#fff]': detailHeadBgChange }">
				<view class="flex  w-full">
					<view class="flex items-center w-full " :style="navbarInnerStyle">
						<text class="nc-iconfont nc-icon-zuoV6xx" :style="navbarInnerArrowStyle" @click="backToPrevious()"></text>
						<view
							class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)] rounded-full border-[2rpx] border-solid border-transparent box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]"
							:class="{ 'border-[#d8d8d8]': detailHeadBgChange }" @click="openShareFn"></view>
					</view>
				</view>
				<!-- 轮播 -->
				<view class="flex w-full items-center " v-if="detailHeadBgChange">
					<u-notice-bar :text="activityData.notice" class="w-full" :bgColor="'#333'" :color="'#fff'"></u-notice-bar>
				</view>
			</view>

			<view class="w-full h-[100vw] relative overflow-hidden">
				<!-- 弹幕  按钮 -->
				<view class="flex items-center absolute left-0 top-10 right-0 z-100 bg-transparent detail-head"
					v-if="Object.keys(activityData).length && activityData.barrageEnable"
					:class="{ '!bg-[#fff]': detailHeadBgChange }" :style="buttonInnerStyle">
					<view
						class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)]  rounded-full border-[2rpx] border-solid border-transparent box-border  grounp-iconfont grounp-icon-danmu1 font-bold text-[#303133] text-[36rpx]"
						:class="{ 'border-[#d8d8d8]': detailHeadBgChange, 'line-through': showBarrage }" @click="onPause">
						<!-- <text>{{ showBarrage ? "弹停" : "弹播"
						}}</text> -->
					</view>
				</view>
				<!-- 音乐  按钮 -->
				<view class="flex items-center absolute left-0 top-20 right-0 z-99 bg-transparent detail-head"
					:class="{ '!bg-[#fff]': detailHeadBgChange }" :style="buttonInnerStyle">
					<view
						class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)]  rounded-full border-[2rpx] border-solid border-transparent box-border grounp-iconfont grounp-icon-yinle  font-bold text-[#303133] text-[36rpx]"
						:class="{ 'border-[#d8d8d8]': detailHeadBgChange, 'rotating-box': isPlayMusic }" @click="playMusic">
					</view>
				</view>

				<l-barrage v-if="showBarrage" :data="barrageData" :pause="pause" :trackHeight="36" :showArea="showArea"
					@progress="progress" class="absolute !h-[285rpx] left-0 top-20 right-0 z-10 bg-transparent " touchPause>
					<template #default="{ content }">
						<view class=" bullet flex   items-center relative">
							<u-avatar :src="img(content.avatar)" size="25" leftIcon="none"
								:default-url="img('static/resource/images/default_headimg.png')" />
							<view class="ml-[22rpx]">
								<view class=" flex  flex-wrap items-center">
									<view class=" mr-[16rpx]">{{ content.nickname }}{{ content.chat }}
									</view>
								</view>
							</view>
						</view>
					</template>
				</l-barrage>

				<view
					class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform swiper-box"
					:class="{ 'translate-x-0': switchMedia === 'img', 'translate-x-full': switchMedia != 'img' }">
					<u-swiper :list="goodsDetail.goods.sliderPicUrls" :indicator="goodsDetail.goods.sliderPicUrls.length > 0"
						:indicatorStyle="{ 'bottom': '70rpx' }" :autoplay="switchMedia === 'img' ? true : false" height="100vw"
						radius="0" @click="swiperClick"></u-swiper>
				</view>
				<view
					class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
					:class="{ 'translate-x-0': switchMedia === 'video', '-translate-x-full': switchMedia != 'video' }">
					<video id="goodsVideo" class="w-full h-full" :src="img(goodsDetail.goods.videoUrl)"
						:poster="img(goodsDetail.goods.videoImg)" objectFit="cover"></video>
				</view>
				<!-- 切换视频、图片 -->
				<view class="media-mode absolute bottom-[74rpx] w-full text-center leading-[50rpx] "
					v-if="goodsDetail.goods.videoUrl && goodsDetail.goods.videoUrl != ''">
					<text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'video' }"
						@click="switchMedia = 'video'">视频</text>
					<text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'img' }"
						@click="(switchMedia = 'img'), videoContext.pause()">图片</text>
				</view>
			</view>
			<view v-if="priceType != ''"
				class="rounded-t-[40rpx] -mt-[44rpx] relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
				:style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat' }">
				<view class="text-[#fff]">
					<view class="inline-block mr-[14rpx]">
						<text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]">活动到手价</text>
						<text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
						<text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0]
						}}</text>
						<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
					</view>
				</view>
			</view>
			<view class="bg-[var(--page-bg-color)] rounded-[40rpx] overflow-hidden -mt-[34rpx] relative">
				<view class="datail-title relative px-[30rpx]"
					:class="{ 'pt-[40rpx]': priceType != '', 'pt-[30rpx]': priceType == '' }">
					<view class="text-[var(--price-text-color)] flex items-baseline mb-[12rpx]" v-if="priceType === ''">
						<view class="inline-block goods-price-time">
							<text class="price-font text-[32rpx]">￥</text>
							<text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
							<text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
							}}</text>
						</view>

					</view>
					<view class="text-[#333] text-[32rpx] font-bold multi-hidden leading-[40rpx]">
						<view class="brand-tag middle" v-if="goodsDetail.goods.brandName">
							{{ goodsDetail.goods.brandName }}
						</view>
						{{ goodsDetail.goods.titleName || goodsDetail.goods.spuName }}
					</view>

				</view>
				<view class="my-[var(--top-m)] sidebar-margin card-template !mx-0 rounded-none">
					<!-- <view class="title">商品详情</view> -->
					<view class="u-content">
						<u-parse :content="goodsDetail.goods.description"
							:tagStyle="{ img: 'vertical-align: top;', p: 'overflow: hidden;word-break:break-word;' }"></u-parse>
					</view>
				</view>
				<view class="mt-[24rpx] sidebar-margin card-template !bg-[#FFB000] !mx-0 rounded-none">
					<view class="card-template-item ">
						<view class="flex flex-col items-center justify-center text-[24rpx] w-full   ">
							<text class="text-[#000] text-[32rpx] font-bold mb-[40rpx] ">距离活动结束时间</text>
							<up-count-down class="text-[#000] text-[28rpx] " :time="discountTime" format="DD:HH:mm:ss"
								@change="onChange">
								<view class="time">
									<view class="time__custom" v-if="timeData.days > 0">
										<text class="time__custom__item">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days
										}}</text>
									</view>
									<text class="time__doc">天</text>

									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours
										}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes >= 10 ? timeData.minutes : '0' +
											timeData.minutes
										}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds < 10 ? '0' + timeData.seconds :
											timeData.seconds }}</text>
									</view>
								</view>
							</up-count-down>
						</view>
					</view>
				</view>
				<view class="sidebar-margin card-template  !mx-0 rounded-none" v-if="Object.keys(activityData).length">
					<view class="card-template-item ">
						<view class="flex flex-col items-center  text-[28rpx] w-full">
							<view class="flex  items-center   w-full  justify-between">
								<view> <text class="grounp-iconfont grounp-icon-dingdan text-[#389BFF]"></text> <text
										class="text-[#000]  font-bold">订单上限
										{{
											activityData.combinationStock }} 单</text></view>
								<view> <text class="grounp-iconfont grounp-icon-yushouhuore text-[#F4420A]"></text> <text
										class="text-[#000]  font-bold ">当前订单 {{ activityData.orderNum }}
										单</text></view>
							</view>
							<view class="relative mt-20rpx   w-full">
								<view
									class="price-font w-70rpx primary-btn-bg text-[#fff] rounded-[30rpx] text-[20rpx] mb-10rpx p-10rpx relative  top-0   font-500 mr-[4rpx]"
									:style="percentStyle">{{
										progressPercent }}
									%</view>
								<progress :percent="progressPercent" activeColor="#ffb9b9" backgroundColor="#ededed"
									stroke-width="13" />
							</view>
							<view class="flex mt-20rpx  w-full">
								<view class="flex  rounded-[var(--rounded-big)] items-center flex-1  sidebar-margin h-[150rpx] team-bg">
									<view
										class="grounp-iconfont grounp-icon-hrcollegepeopleCardingRange bg-[#389BFF] flex items-center justify-center text-[#fff] mr-10rpx rounded-[20rpx] text-[40rpx] w-[80rpx] h-[80rpx] ">
									</view>
									<view class="flex flex-col flex-1">
										<text class="text-[#333] text-[28rpx] ">
											{{ activityData.joinNum }}
										</text>
										<text class="text-[24rpx] mt-[20rpx]">
											参加人数
										</text>

									</view>
								</view>
								<view class="flex  rounded-[var(--rounded-big)] items-center flex-1 sidebar-margin h-[150rpx] team-bg">
									<view
										class="grounp-iconfont grounp-icon-zuji flex items-center primary-btn-bg justify-center text-[#fff]   mr-10rpx rounded-[20rpx] text-[40rpx] w-[80rpx] h-[80rpx] ">
									</view>
									<view class="flex flex-col flex-1">
										<text class="text-[#333] text-[28rpx] ">
											{{ activityData.viewNum }}

										</text>
										<text class="text-[24rpx] mt-[20rpx]">
											浏览
										</text>

									</view>
								</view>
								<view class="flex  rounded-[var(--rounded-big)] items-center flex-1 sidebar-margin h-[150rpx] team-bg">
									<view style="background: linear-gradient(127deg, rgb(255, 176, 0) 0%, rgb(255, 160, 41) 100%)"
										class="grounp-iconfont grounp-icon-fenxiang1-copy flex items-center  justify-center text-[#fff]  mr-10rpx rounded-[20rpx] text-[40rpx] w-[80rpx] h-[80rpx] ">
									</view>
									<view class="flex flex-col flex-1">

										<text class="text-[#333] text-[28rpx] ">
											{{ activityData.shareNum }}

										</text>
										<text class="text-[24rpx] mt-[20rpx]">
											分享
										</text>
									</view>
								</view>

							</view>
						</view>

					</view>
				</view>
				<view class=" sidebar-margin card-template mt-[20rpx] !mx-0 rounded-none"
					v-if="newListUser && newListUser.length > 0">
					<view class="card-template-item ">
						<view class="flex flex-wrap w-full pt-[7rpx] ">

							<view class="flex items-center flex-col w-[20%] py-[23rpx]" v-for="(item, index) in newListUser"
								:key="index">
								<u-avatar :src="item.avatar" size="40" leftIcon="none"
									:default-url="img('static/resource/images/default_headimg.png')" />
								<view class="flex flex-col items-center mt-[16rpx]">
									<text class="text-[26rpx]">
										{{ item.nickname }}
									</text>

								</view>
							</view>

						</view>
					</view>
				</view>


				<view class="my-[var(--top-m)] sidebar-margin card-template !mx-0 rounded-none"
					v-if="Object.keys(activityData).length">
					<!-- <view class="title">活动详情</view> -->
					<view class="u-content">
						<u-parse :content="activityData.content"
							:tagStyle="{ img: 'vertical-align: top;', p: 'overflow: hidden;word-break:break-word;' }"></u-parse>
					</view>
				</view>
				<view class="mt-[var(--top-m)] mb-20rpx sidebar-margin card-template  !mx-0 rounded-none">
					<view class="flex items-center  min-h-[40rpx] mb-[30rpx]">
						<text class="grounp-iconfont grounp-icon-bangdan text-[40rpx] text-[#FF5E34] mr-10rpx"></text>
						<text class="title !mb-[0rpx]">排行榜</text>
					</view>
					<view class=" primary-btn-bg  flex rounded-[30rpx] px-[20rpx]">
						<view class="w-[60rpx] h-[60rpx] flex items-center justify-center relative">
							<text class="text-[30rpx] font-500 text-[#fff] grounp-iconfont grounp-icon-yonghu"></text>
						</view>
						<view class="flex  flex-1 justify-between ml-[20rpx] pt-[4rpx]">
							<view class=" flex items-center text-[28rpx] text-[#333] leading-[40rpx] multi-hidden">
							</view>
							<view class="flex items-center ">
								<view class="text-[var(--price-text-color)] price-font flex items-baseline">
									<text class="text-[30rpx] text-[#fff]  font-500 grounp-iconfont grounp-icon-hongbao1"></text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="rankList.length > 0">
						<swiper :vertical="true" :duration="500" :interval="3000" :display-multiple-items="5" autoplay="true"
							circular="true" class="flex justify-between w-full h-[500rpx]">
							<swiper-item v-for="(item, index) in rankList" :key="index" @touchmove.prevent.stop>
								<view class="bg-[#fff] flex rounded-[var(--rounded-mid)] p-[20rpx]">
									<view class="w-[80rpx] h-[80rpx] flex items-center justify-center relative">
										<image class="absolute top-[0rpx] left-[0rpx] w-[30rpx] h-[38rpx]" :style="{ zIndex: 9 }"
											:src="getRankBadge(index + 1)" mode="aspectFill"></image>
										<view class="absolute top-[5rpx] left-[0rpx] flex items-center justify-center w-[30rpx] h-[30rpx]"
											:style="{ zIndex: 10 }">
											<text class="text-[20rpx] font-bold text-[#fff]">{{ index + 1 }}</text>
										</view>

										<image class="w-[80rpx] h-[80rpx] rounded-[var(--rounded-mid)]" :src="img(item.avatar)"
											:mode="'aspectFill'" @error="item.avatar = 'static/resource/images/default_headimg.png'">
										</image>
									</view>
									<view class="flex  flex-1 justify-between ml-[20rpx] pt-[4rpx]">
										<view class=" flex items-center text-[28rpx] text-[#333] leading-[40rpx] multi-hidden">
											{{ item.nickname }}
										</view>
										<view class="flex items-center ">
											<view class="text-[var(--price-text-color)] price-font flex items-baseline">
												<text class="text-[28rpx] font-500">{{ fen2yuan(item.brokeragePrice) }}</text>
											</view>

										</view>
									</view>

								</view>


							</swiper-item>
						</swiper>

					</view>
					<view class="empty-page" v-else>
						<image class="img" :src="img('static/resource/images/system/empty.png')" model="aspectFit" />
						<view class="desc">暂无排行</view>
					</view>
				</view>


				<view class="tab-bar-placeholder"></view>
				<view
					class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar z-1 items-center">
					<view class="flex items-center">
						<view class="flex flex-col justify-center items-center mr-[38rpx]"
							@click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
							<view class="nc-iconfont nc-icon-shouyeV6xx11 text-[40rpx]"></view>
							<text class="text-[20rpx] mt-[10rpx]">首页</text>
						</view>
						<!-- #ifdef H5 -->
						<!-- <view class="flex flex-col justify-center items-center mr-[38rpx]"
							@click="redirect({ url: '/addon/shop/pages/goods/cart' })">
							<view class="iconfont icongouwuche2 text-[40rpx]"></view>
							<text class="text-[20rpx] mt-[10rpx]">购物车</text>
						</view> -->
						<!-- <view class="flex flex-col justify-center items-center mr-[38rpx]"
							@click="redirect({ url: '/addon/shop/pages/goods/cart' })">
							<view class="relative w-[40rpx] h-[40rpx]">
								<view class="iconfont icongouwuche2 text-[40rpx]"></view>
								<view v-if="cartTotalNum"
									:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', cartTotalNum > 9 ? 'px-[10rpx]' : '']">
									{{ cartTotalNum > 99 ? "99+" : cartTotalNum }}
								</view>
							</view>
							<text class="text-[20rpx] mt-[10rpx]">购物车</text>
						</view> -->
						<!-- #endif -->
						<!-- <view class="flex flex-col justify-center items-center mr-[38rpx]" @click="collectFn">
							<text class="nc-iconfont text-[40rpx]"
								:class="{ 'text-[#ff0000] nc-icon-xihuanV6mm': isCollect, 'text-[#303133] nc-icon-guanzhuV6xx': !isCollect }"></text>
							<text class="text-[20rpx] mt-[10rpx]">收藏</text>
						</view> -->

						<!-- #ifdef MP-WEIXIN -->
						<!-- <view class="flex flex-col justify-center items-center mr-[38rpx]"
							@click="redirect({ url: '/addon/shop/pages/goods/cart' })">
							<view class="relative w-[40rpx] h-[40rpx]">
								<view class="iconfont icongouwuche2 text-[40rpx]"></view>
								<view v-if="cartTotalNum"
									:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', cartTotalNum > 9 ? 'px-[10rpx]' : '']">
									{{ cartTotalNum > 99 ? "99+" : cartTotalNum }}
								</view>
							</view>
							<text class="text-[20rpx] mt-[10rpx]">购物车</text>
						</view>-->
						<!-- <view>
							<nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
								:send-message-img="sendMessageImg">
								<view class="flex flex-col justify-center items-center mr-[38rpx]">
									<text class="nc-iconfont nc-icon-kefuV6xx-1 text-[40rpx]"></text>
									<text class="text-[20rpx] mt-[10rpx]">客服</text>
								</view>
							</nc-contact>
						</view> -->
						<!-- #endif -->
					</view>
					<view class="flex flex-1" v-if="goodsDetail.goods.status == 1">

						<button v-if="combinationUser.member || combinationUser.head"
							class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
							style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);" @click="openShareFn">
							分享好友</button>


						<button v-if="activityData.startTime > new Date().getTime()"
							:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
							class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">未开始</button>
						<button v-else-if="activityData.endTime <= new Date().getTime()"
							:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
							class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已结束</button>
						<block v-else>
							<button v-if="goodsDetail.stock == 0"
								:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
								class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已售罄</button>
							<button v-else-if="combinationUser.head"
								:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
								class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已开团</button>
							<button v-else-if="combinationUser.member"
								:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
								class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已参团</button>
							<block v-else>
								<button v-if="combinationUser?.id"
									:style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
									class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] primary-btn-bg !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
									@click="onJoinGroupon()"> 立即参团 </button>
								<button v-else :style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
									class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] primary-btn-bg !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
									@click="buyFn('buy_now')"> 立即开团 </button>
							</block>
						</block>
					</view>
					<view class="flex flex-1" v-else>
						<button
							class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
					</view>
				</view>
			</view>

			<view @touchmove.prevent.stop>
				<u-popup class="weight-img-popup" style="background:transparent;" :show="isShowRedPacket" border-radius="30"
					mode="center" :safe-area-inset-bottom="false" :closeable="true" @close="isShowRedPacket = false"
					zIndex="999999">
					<view class=" flex" @touchmove.prevent.stop>
						<image style=" width: 600rpx; height: 1200rpx;"
							:src="'https://files.meton.vip/29bbd29936d2a6224b45ce9efeaa99cb193d3b59ac874fbbc1940cd4697a39c1.png'">
						</image>
					</view>
				</u-popup>
			</view>

			<ns-goods-sku v-if="loading" ref="goodsSkuRef" :goods-detail="goodsDetail" @change="specSelectFn"></ns-goods-sku>
			<share-poster ref="sharePosterRef" posterType="shop_goods" :posterParam="posterParam" :copyUrlParam="copyUrlParam"
				:copy-text="copyTextParam" :shareBgUrlParam="activityData.shareImgUrl"
				:share-url="'addon/shop/pages/superGroupon/groupon'" />
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- 红包 -->
		<wx-red-packet class="redPacket-img-popup"></wx-red-packet>
		<!-- #endif -->
	</view>


</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance, nextTick, reactive, watch, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onPageScroll } from '@dcloudio/uni-app'
import { img, redirect, handleOnloadParams, getToken, deepClone, goback } from '@/utils/common';
import wxRedPacket from '../../components/wx-red-packet/wx-red-packet.vue'; //红包
import { getGoodsDetail, } from '@/addon/shop/api/goods';
import nsGoodsSku from '@/addon/shop/components/ns-goods-sku/ns-goods-sku.vue';
import useMemberStore from '@/stores/member'
import { useShare } from '@/hooks/useShare'
import sharePoster from '@/components/share-poster-two/share-poster.vue'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { getCombinationActivity, getNewListCombination, getCheckUserCombination, getChatListCombination, getBrokerageUserChildSummaryPageByPrice } from '@/addon/shop/api/combination'
import { nickNameFormat, useDurationTime, fen2yuan } from '@/utils/formatting';
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.onPlay(() => {
	console.log('开始播放');
});
// 监听音频暂停事件
innerAudioContext.onPause(() => {
	console.log('音频已暂停');
});

// 监听音频停止事件
innerAudioContext.onStop(() => {
	console.log('音频已停止');
});
innerAudioContext.onWaiting(() => {
	console.log('等待中');
});


const diyGoods = useGoods();
// 使用 reactive 创建响应式对象
const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
	timeData.value = e;
};
const showArea = ref('middle')
const pause = ref(false)
// 弹幕
const showBarrage = ref(true)
const barrageData = ref([])

const createBarrageData = async () => {
	if (!showBarrage.value) {
		return
	}

	let params = {
		activityId: pageParameter.aid,
		count: 50
	}
	const { data } = await getChatListCombination(params);

	barrageData.value.push(...data)
}
let count = 0
const progress = (v) => {
	if (v > 85 && count < 5) {
		count++
		createBarrageData()
	}
}
const progressPercent = computed(() => {
	if (activityData.value) {
		return parseInt(
			(100 * activityData.value.orderNum / activityData.value.combinationStock
			)) > 100 ? 100 : parseInt(
				(100 * activityData.value.orderNum / activityData.value.combinationStock
				))
	} else {
		return 0
	}


})
const onPause = () => {
	// pause.value = !pause.value
	showBarrage.value = !showBarrage.value
}
// 红包
const isShowRedPacket = ref(false)
// 分享
const { setShare } = useShare()

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

// 购物车数量

const goodsSkuRef: any = ref(null);
const goodsDetail: any = ref({});
const switchMedia: any = ref('img');


const loading = ref<boolean>(false);
const discountTime = ref(0)

const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)
const videoContext: any = ref(null)
let pageParameter: any = {};
onLoad((option: any) => {
	// #ifdef MP-WEIXIN
	// 处理小程序场景值参数
	option = handleOnloadParams(option);
	// #endif
	pageParameter = option;
	let aid = pageParameter.aid
	pageParameter.aid = aid.split('-')[0]
	pageParameter.hid = aid.split('-')[1] || undefined
})

onShow(() => {
	loading.value = false;
	getDetailInfo();
	getNewListCombinationFn()
	createBarrageData()
	if (uni.getStorageSync(import.meta.env.VITE_REQUEST_STORAGE_TOKEN_KEY)) {
		getCheckUserCombinationFn()
		getBrokerageRankFn()
	}


})


/**
 * 
 * @param 参团
 */
const onJoinGroupon = () => {
	goodsDetail.value.combination_activity.id = activityData.value.id

	goodsDetail.value.combination_activity.combinationHeadId = combinationUser.value.id || 0
	if (goodsSkuRef.value) {
		goodsSkuRef.value.open('join')
	}
}



/**
 * 佣金排行榜
 */
// 获取排行榜名次图片的函数
function getRankBadge(sort: any) {
	switch (sort) {
		case 1:
			return img('addon/shop/rank/rank_first.png');
		case 2:
			return img('addon/shop/rank/rank_second.png');
		case 3:
			return img('addon/shop/rank/rank_third.png');
		default:
			return img('addon/shop/rank/rank.png');
	}
}
const rankList = ref<any>([
])

const getBrokerageRankFn = async () => {

	let params = {}
	const { data } = await getBrokerageUserChildSummaryPageByPrice(params);
	rankList.value = data.list;

}
/**
 * 获得用户在拼团活动中身份
 */
const combinationUser = ref<any>([])
const getCheckUserCombinationFn = async () => {

	let params = {
		activityId: pageParameter.aid,
		mid: pageParameter.mid,
		hid: pageParameter.hid,
	}
	const { data } = await getCheckUserCombination(params);
	combinationUser.value = data;

	// goodsDetail.value.combination_activity.combinationHeadId = combinationUser.value.id || 0

	copyUrlFn()
}
/**
 * 获得最近10条 拼团用户
 */
const newListUser = ref<any>([])
const getNewListCombinationFn = async () => {

	let params = {
		activityId: pageParameter.aid,
	}
	const { data } = await getNewListCombination(params);
	newListUser.value = data
}

const activityData = ref<any>({})
const getDetailInfo = async () => {
	// 加载活动信息
	const { data: activity } = await getCombinationActivity(
		{ id: pageParameter.aid }
	);
	activityData.value = activity
	// 如果不展示弹幕
	if (activity.barrageEnable) {
		showBarrage.value = true
	} else {
		showBarrage.value = false
	}


	// 加载商品信息 
	const { data: spuData } = await getGoodsDetail({ spuId: activity.spuId || '', })
	let data: any = deepClone(spuData);
	/** 判断商品的sku是否正在参加活动 如果没有参加 库存为0不能购买 */
	data.skus.forEach((sku: any) => {
		const product = activity.products.find((product: any) => product.skuId === sku.skuId);
		if (product) {
			sku.combination_price = product.combinationPrice;
			sku.stock = product.combinationStock || sku.stock
			sku.type = 'combination_activity' //自己加的 商品详情类型
		} else {
			sku.combination_price = 0;
			sku.type = 'goods' //不是拼团商品
			// 找不到可能是没配置，则不能发起秒杀
			sku.stock = 0;
		}
	})
	goodsDetail.value.combination_activity = activityData.value
	goodsDetail.value.type = 'combination_activity'
	/** 将数据接口拼成 所需要的接口 尽量减少前端代码的改动  */
	// 设置限购信息
	data.is_limit = true //拼团活动 限购默认开启 根据限购参数来进行适配
	data.limit_type = 1 //限购类型 1 单次限购 （niushop协议）
	// 设置限购数量
	if (activity.totalLimitCount > 0 && activity.singleLimitCount > 0) {
		data.max_buy = Math.min(activity.totalLimitCount, activity.singleLimitCount);
	} else if (activity.totalLimitCount > 0) {
		data.max_buy = activity.totalLimitCount;
	} else if (activity.singleLimitCount > 0) {
		data.max_buy = activity.singleLimitCount;
	}
	goodsDetail.value.goods = data; //商品信息
	goodsDetail.value.goods_id = data.spuId,
		goodsDetail.value.member_discount = false,
		goodsDetail.value.member_price = undefined,

		goodsDetail.value.evaluate_is_show = true //展示评价
	goodsDetail.value.skuList = data.skus.map((sku: any) => {
		return {
			cost_price: sku.costPrice, //成本价
			market_price: sku.marketPrice, //划线价
			member_discount: sku.member_discount,
			member_price: sku.member_price,//会员价
			combination_price: sku.combination_price || 0,//拼团价
			type: sku.type,
			price: sku.price, //零售价
			sku_id: sku.skuId,
			sku_image: sku.picUrl,
			stock: sku.stock,
			sku_spec_format: sku.properties.map((value: any) => {
				return value.valueName
			}).toString(),
		}
	})
	goodsDetail.value.goodsSpec = diyGoods.getPropertyList(data.skus).map((spec) => {
		return {
			spec_id: spec.id,
			spec_name: spec.name,
			spec_values: spec.values.map((specValue: any) => {
				return specValue.name
			}).toString()
		}
	})

	/** 原代码的接口逻辑中有默认选中的商品 故暂取第一个sku的数据为默认选中商品 */
	Object.assign(goodsDetail.value, goodsDetail.value.skuList[0])
	goodsDetail.value.delivery_type_list = goodsDetail.value.goods.delivery_type_list ? Object.values(goodsDetail.value.goods.delivery_type_list) : [];


	loading.value = true;


	goodsDetail.value.goods.attr_format = []
	if (data.goods && data.goods.attr_format) {
		let attrFormatArr: any = deepClone(JSON.parse(data.goods.attr_format));
		attrFormatArr.forEach((item: any, index: any) => {
			if ((item.attr_child_value_name && !(item.attr_child_value_name instanceof Array)) || ((item.attr_child_value_name instanceof Array) && item.attr_child_value_name.length)) {
				goodsDetail.value.goods.attr_format.push(item);
			}
		})
	}
	if (goodsDetail.value.goods.videoUrl && goodsDetail.value.goods.videoUrl != '') videoContext.value = uni.createVideoContext('goodsVideo');
	sendMessageTitle.value = goodsDetail.value.goods.titleName
	// sendMessagePath.value = '/addon/shop/pages/goods/detail?sku_id=' + goodsDetail.value.sku_id;
	sendMessagePath.value = '/addon/shop/pages/superGroupon/groupon?aid=' + activityData.value.id;

	if (goodsDetail.value.type) {
		sendMessagePath.value += '&type=' + goodsDetail.value.type;
	}
	sendMessageImg.value = img(goodsDetail.value.goods.picUrl)


	// 拼团信息
	if (Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'combination_activity') {
		let now = new Date();
		let timestamp: any = now.getTime();
		discountTime.value = activityData.value.endTime - timestamp.toFixed(0)
	}
	// 商品限购
	goodsMaxBuy(goodsDetail.value);

	if (activity.videoUrl && activity.videoUrl != '') {

		innerAudioContext.src = activity.videoUrl


	}

	copyUrlFn();

	// 分享 - start
	let share = {
		title: goodsDetail.value.goods.titleName,
		desc: goodsDetail.value.goods.subTitleName,
		url: goodsDetail.value.goods.picUrl,
		path: '/addon/shop/pages/superGroupon/groupon' + copyUrlParam.value,

	}
	uni.setNavigationBarTitle({
		title: goodsDetail.value.goods.titleName || ''
	})
	setShare({
		wechat: {
			...share
		},
		weapp: {
			...share
		}
	});
	// 分享 - end
	nextTick(() => {

		setTimeout(() => {
			const query = uni.createSelectorQuery().in(instance);
			query.select('.swiper-box').boundingClientRect((data: any) => {
				swiperHeight = data ? data.height : 0;
			}).exec();
			query.select('.detail-head').boundingClientRect((data: any) => {
				if (data) {
					detailHead = data.height ? data.height : 0;
				}
			}).exec();
			// 如果有音乐 

		}, 400)
		// #ifdef MP
		if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		// #endif
	})

}






// 商品限购
const maxBuy = ref(-1);
const goodsMaxBuy = (data: any = {}) => {
	// 限购 - 是否开启限购
	if (data.goods.is_limit && userInfo.value && data.goods.stock > 0) {
		if (data.goods.max_buy) {
			let max_buy = 0;
			if (data.goods.limit_type == 1) { //单次限购
				max_buy = data.goods.max_buy;
			} else { // 单人限购
				let buyVal = data.goods.max_buy - (data.goods.has_buy || 0);
				max_buy = buyVal > 0 ? buyVal : 0;
			}

			if (max_buy > data.goods.stock) {
				maxBuy.value = data.goods.stock
			} else if (max_buy <= data.goods.stock) {
				maxBuy.value = max_buy;
			}
		}
	}
}


const specSelectFn = (id: any) => {
	goodsDetail.value.skuList.forEach((item: any, index: any) => {
		if (item.sku_id == id) {
			Object.assign(goodsDetail.value, item);
		}
	})
}






const buyFn = (type: any) => {
	if (goodsSkuRef.value) {
		goodsSkuRef.value.open(type)
	}
}












//预览图片
const imgListPreview = (item: any, index: any) => {
	if (Array.isArray(item)) {
		if (!item.length) return false
		var urlList = item;
		uni.previewImage({
			indicator: "number",
			current: index,
			loop: true,
			urls: urlList
		})
	} else {
		if (item === '') return false
		var urlList = []
		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
		uni.previewImage({
			indicator: "number",
			loop: true,
			urls: urlList
		})
	}

}

// 返回上一页
const backToPrevious = () => {
	if (getCurrentPages().length > 1) {
		uni.navigateBack({
			delta: 1
		});
	} else {
		redirect({
			url: '/addon/shop/pages/index',
			mode: 'reLaunch'
		});
	}
}
// 播放音乐

const isPlayMusic = ref(true)
const playMusic = () => {
	if (isPlayMusic.value) {
		innerAudioContext.stop()

	} else {
		innerAudioContext.play()

	}
	isPlayMusic.value = !isPlayMusic.value

}




/************ 自定义头部-start ****************/
// 获取系统状态栏的高度
let systemInfo = uni.getDeviceInfo();
let platform = systemInfo.platform;
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
// 进度样式
const percentStyle = computed(() => {
	let style = '';
	if (progressPercent.value > 90) {
		style = 'left:90%'
	} else {
		style = 'left:' + progressPercent.value + '%'
	}
	return style
})
// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
	style += 'height:' + menuButtonInfo.height + 'px;';
	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-top:' + menuButtonInfo.top + 'px;';
	style += 'padding-bottom: 8px;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef H5
	style += 'height: 100rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif
	return style;
})
// 弹幕按钮 开关样式
const buttonInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	let rightButtonWidth = '30rpx';
	style += 'height:' + menuButtonInfo.height + 'px;';
	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'margin-top:' + menuButtonInfo.top + 'px;';
	style += 'padding-bottom: 8px;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef H5
	style += 'height: 100rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif
	return style;
})
// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	style += "padding-left: 10rpx;"
	style += "padding-right: 10rpx;"
	style += 'position: absolute;';
	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
	style += 'font-size: 26px;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 700;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
	}
	// #endif
	// #ifdef H5
	style += 'font-size: 26px;';
	// #endif
	return style;
})

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0
let detailHead = 0

const detailHeadBgChange = ref(false)
onPageScroll((e) => {
	if (swiperHeight == 0 || detailHead == 0) return;
	let height = swiperHeight - detailHead - 20;
	detailHeadBgChange.value = false;
	if (e.scrollTop >= height) {
		detailHeadBgChange.value = true;
	}
})
/************ 自定义头部-end ****************/

const swiperClick = (index: any) => {
	if (typeof index == 'number') imgListPreview(goodsDetail.value.goods.sliderPicUrls, index)
}

/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrlParam = ref('');
const copyTextParam = ref('')
let posterParam: any = {};
let wap_member_id = uni.getStorageSync('wap_member_id');

// 分享海报链接
const copyUrlFn = () => {
	let hid = combinationUser.value.id || 0
	copyTextParam.value = activityData.value?.copywriting || ''

	// copyUrlParam.value = '?sku_id=' + goodsDetail.value.sku_id;
	copyUrlParam.value = '?aid=' + activityData.value?.id + '-' + hid;
	// if (goodsDetail.value.type) {
	// 	copyUrlParam.value += '&type=' + goodsDetail.value.type;
	// }

	// copyUrlParam.value += '&hid=' + hid;
	if (wap_member_id) copyUrlParam.value += '&mid=' + wap_member_id;

}

const openShareFn = () => {

	posterParam.aid = activityData.value.id + '-' + activityData.value.hid;
	// posterParam.hid = activityData.value.hid;

	if (wap_member_id) posterParam.member_id = wap_member_id;
	sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/

// 价格类型
const priceType = ref('') //''=>原价，新人价=>newcomer_price，discount_price=>折扣价，member_price=>会员价

// 商品价格
const goodsPrice = computed(() => {
	let price = 0;
	if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'newcomer_discount' && goodsDetail.value.is_newcomer && goodsDetail.value.newcomer_price != goodsDetail.value.price) {
		// 新人价
		price = goodsDetail.value.newcomer_price;
		priceType.value = 'newcomer_price'
	} else if (Object.keys(goodsDetail.value).length && goodsDetail.value.type == 'discount' && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.is_discount && goodsDetail.value.sale_price != goodsDetail.value.price) {
		// 折扣价
		price = goodsDetail.value.sale_price ? goodsDetail.value.sale_price : goodsDetail.value.price;
		priceType.value = 'discount_price'
	} else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
		// 会员价
		price = goodsDetail.value.member_price ? goodsDetail.value.member_price : goodsDetail.value.price;
		priceType.value = 'member_price'
	} else if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'combination_activity' && goodsDetail.value.combination_price) {
		// 拼团价

		price = goodsDetail.value.combination_price ? goodsDetail.value.combination_price : goodsDetail.value.price;
		priceType.value = 'combination_price'
	} else {
		price = goodsDetail.value.price
		priceType.value = ''
	}
	return diyGoods.fen2yuan(price);
})
onMounted(() => {
	nextTick(() => {

	})
})
// 关闭预览图片
onUnload(() => {
	// #ifdef  H5 || APP
	uni.closePreviewImage()
	// #endif
	innerAudioContext.destroy()

})
</script>
<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

.rotating-box {

	animation: sequential-rotate 5s linear infinite;
}

@keyframes sequential-rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.time {
	@include flex;
	align-items: center;

	&__custom {
		width: 80rpx;
		height: 80rpx;
		background-color: #000;
		border-radius: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

		&__item {
			color: #FFB000;
			font-size: 40rpx;
			text-align: center;
		}
	}

	&__doc {
		color: #000;
		padding: 0rpx 20rpx;
	}

	&__item {
		color: #fff;
		font-size: 30rpx;
		margin-right: 8rpx;
	}
}

.bullet {
	background-color: rgba(0, 0, 0, 40%);
	padding: 5rpx;
	color: #fff;
	border-radius: 50rpx;
}

:deep(.uni-video-bar) {
	bottom: 34rpx !important;
}

:deep(.uni-video-cover) {
	background: none;
}

:deep(.uni-video-cover-duration) {
	display: none;
}

:deep(.uni-video-cover-play-button) {
	border-radius: 50%;
	border: 4rpx solid #fff;
	width: 120rpx;
	height: 120rpx;
	background-size: 30%;
}

.remove-border {
	&::after {
		border: none;
	}
}

:deep(.u-cell-group__wrapper) {
	.u-cell__body {
		padding: 23rpx 32rpx;
	}
}

.tab-bar-placeholder {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.tab-bar {
	padding-top: 16rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
}

:deep(.weight-img-popup .u-popup__content) {
	background-color: transparent;
}

:deep(.u-count-down) .u-count-down__text {
	color: #fff;
	font-size: 28rpx;
}

:deep(.u-swiper-indicator__wrapper--line__bar) {
	height: 5rpx !important;
}

:deep(.u-swiper-indicator__wrapper--line) {
	height: 5rpx !important;
}

.datail-title {
	background: linear-gradient(#fff 70%, #F6F6F6);
}

.goods-sku .value-wid {
	width: calc(100% - 160rpx);
}

.media-mode {
	text {
		background: rgba(100, 100, 100, 0.4);
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
		display: inline-block;

		&:last-child {
			margin-left: 40rpx;
		}
	}
}

/*  #ifdef MP  */
.goods-price-time {
	animation: fadein .1s;
}

/* 进入动画 */
@keyframes fadein {
	0% {
		opacity: 0;
	}

	99% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*  #endif  */
</style>
